// MultiPoint.js
// Vertex shader program
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'attribute float a_PointSize;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = a_PointSize;\n' +
'}\n';

// Fragment shader program
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the color
'}\n';

function main() {
	// Retrieve <canvas> element
	var canvas = document.getElementById('webgl');

	// Get the rendering context for WebGL
	var gl = getWebGLContext(canvas);
	var gl = getWebGLContext(canvas);
	if (!gl) {
		console.log('Failed to get the rendering context for WebGL');
		return;
	}
	// Initialize shaders
	if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
		console.log('Failed to initialize shaders.');
		return;
	}
	// Set the positions of vertices
	var n = initVertexBuffers(gl);
	if (n < 0) {
		console.log('Failed to set the positions of the vertices');
		return;
	}

	// Set the color for clearing <canvas>
		gl.clearColor(0.0, 0.0, 0.0, 1.0);

	// Clear <canvas>
		gl.clear(gl.COLOR_BUFFER_BIT);

	// Draw three points
	gl.drawArrays(gl.POIMTS, 0, n); // n is 3
}



function initVertexBuffers(gl) {
	var n = 3; // The number of vertices

//------------------------------
//****** ARRAY DE VERTICES
//------------------------------
	var vertices = new Float32Array(
		[.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
	
	// Create a buffer object
	var vertexBuffer = gl.createBuffer();
	if (!vertexBuffer) {
		console.log('Failed to create the buffer object of vertexes');
		return -1;
	}
	var ratiusBuffer = gl.createBuffer();
	if (!ratiusBuffer) {
		console.log('Failed to create the buffer object of ratiuses');
		return -1;
	}

	// Bind the buffer object to target
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	
	// Write date into the buffer objects
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
	var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
	if (a_Position < 0) {
		console.log('Failed to get the storage location of a_Position');
		return;
	}

	// Assign the buffer object to a_Position variable
	gl.vertexAttribPointer(a_PointSize, 2, gl.FLOAT, false, 0, 0);
	// Enable the assignment to a_Position variable
	gl.enableVertexAttribArray(a_Position);

//------------------------------
//******* ARRAY DE TAMAÑOS
//------------------------------
	var radios = new Float32Array(
		[10.0, 20.0, 30.0]);
	// Bind the buffer object to target ratiuses
	gl.bindBuffer(gl.ARRAY_BUFFER, ratiusBuffer);
	
	// Write date into the buffer objects ratiuses
	gl.bufferData(gl.ARRAY_BUFFER, radios, gl.STATIC_DRAW);
	var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
	if (a_PointSize < 0) {
		console.log('Failed to get the storage location of a_PointSize');
		return;
	}

	// COMO QUE ESTO HACE UNA COLA DE VALORES PARA LA VARIABLE 
	//------ PLANIFICA UN VOLCADO DEL BUFER
	// Assign the buffer object to a_PointSize variable
	gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, 0, 0);

	// Enable the assignment to a_Position variable
	gl.enableVertexAttribArray(a_PointSize);

	return n;
}